<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>带参数的过滤器的用法</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:500px;
				min-height:300px;
				margin:50px auto;
				padding:20px;
				box-shadow:10px 20px 20px 10px gray;
			}
			h3{
				height:50px;
				line-height:50px;
				text-align:center;
				background-color:black;
				color:white;
				margin-bottom:20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>案例:使用过滤器格式化日期</h3>
			<div>{{date | format("yyyy-MM-dd")}}</div>
		</div>
		
		<script>
			/*  
			将时间格式化为yyyy-MM-dd格式
			日期格式化规则:
			y:年
			M:月(1-12)
			d:天(1-31)
			h:小时(0-23)
			m:分(0-59)
			s:秒(0-59)
			S:毫秒(0-999)
			q:季度(1-4)
			*/
		   Vue.filter("format",function(value,arg){
			   if(arg == 'yyyy-MM-dd'){
				   var ret = "";
				   ret += value.getFullYear()+"-"+(value.getMonth()+1)+"-"+value.getDate();
				   return ret;
			   }
			   return value;
		   })
			let vm = new Vue({
				el:"#app",
				data:{
					date:new Date()
				}
			})
		</script>
	</body>
</html>
